<template>
    <div class="swHomeProgress-page" data-page="swHomeProgress">
        <div class="sw-card">
            <div class="sw-card__head">
                <div class="sw-card__title">维保完成度</div>
                <div class="sw-card__desc sw-select" id="swWbSelect" style="white-space: normal;">
                    <span id="swWbProgressCountTypeText">按该月到期任务计算</span><span class="sw-select-arrow"></span>
                </div>
            </div>
            <div id="swHomeProgressList"></div>
        </div>
    </div>
</template>
<style scoped></style>
<script>
    return {
        data: function () {
            return {
                taskType: 1
            }
        },
        methods: {
            getData: function () {
                var period
                var self = this
                var periodMap = {
                    '1': '月',
                    '2': '季',
                    '3': '半年',
                    '4': '年',
                }
                var typeMap = {
                    '1': '维保巡查',
                    '2': '保养',
                    '3': '单点测试',
                    '4': '联动测试',
                }
                jQuery("#swHomeProgressList").empty();
                Dao.statisticsTaskTimeTypeSw({
                    orgId: single_Orgid_wbdw,
                    taskType: self.taskType,
                    dataType:1
                }, function (data) {
                    jQuery("#swHomeProgressList").empty();
                    if (data && data.length > 0) {
                        jQuery(".swHomeProgress-page").show();
                        for (var i = 0; i < data.length; i++) {
                            var o = data[i]
                            var period = periodMap[o.workPeriod]
                            var taskType = typeMap[o.maintainType]
                            var doneNum = o.allTaskNum - o.onTaskNm
                            var html = `<div class="sw-card__body wb-progress-${o.maintainType}">
                                <div class="sw-chart" style="flex:1;">
                                    <div class="sw-chart__wrap is-wb-progress" id="swHomeProgressChart${o.maintainType}"></div>
                                    <div class="sw-chart__desc is-right">
                                        <div class="sw-chart__desc-wrap">
                                            <div class="sw-chart__title">${taskType}完成度</div>
                                            <div class="sw-chart__count">已完成${doneNum}  |  总任务数${o.allTaskNum}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>`
                            jQuery("#swHomeProgressList").append(html);
                            self.drawGauge(o.maintainType, doneNum/o.allTaskNum)
                        }

                        jQuery('.wb-progress-1').off().click(function(){
                            app.router.navigate(`/maintainInspect/1/${single_Orgid_wbdw}/`);
                        })
                        jQuery('.wb-progress-2').off().click(function(){
                            app.router.navigate(`/maintain/2/${single_Orgid_wbdw}/`);
                        })
                        jQuery('.wb-progress-3').off().click(function(){
                            app.router.navigate(`/singleTest/1/${single_Orgid_wbdw}/`);
                        })
                        jQuery('.wb-progress-4').off().click(function(){
                            app.router.navigate(`/linkTest/1/${single_Orgid_wbdw}/`);
                        })
                    } else {
                        jQuery(".swHomeProgress-page").hide();
                    }
                });
            },
            getColorByValue(score) {
                return '#47CFAD'
            },
            drawGauge(bizId, value) {
                // value=0.90
                let self = this;
                app.gauge.create({
                    el: `#swHomeProgressChart${bizId}`,
                    value: value.toFixed(2),
                    valueText: `${(value*100).toFixed(2)}%`,
                    borderBgColor:'#f1f1f1',
                    borderColor:self.getColorByValue(Number((value*100).toFixed(2))),
                    borderWidth:15,
                    valueFontSize:35
                })
            },
            drawAnnularChart: function (bizId, value, total) {
                let self = this;
                let myChart = echarts.init(document.getElementById(`swHomeProgressChart${bizId}`));
                var option = {
                    color: self.getColorByValue(value),
                    title: {
                        text: value.toFixed(2) + '%',
                        left: 'center',
                        top: 'center',
                        textStyle: {
                            color: '#333',
                            fontSize: 12,
                            align: 'center'
                        }
                    },
                    series: [{
                        name: '',
                        type: 'pie',
                        radius: ['85%', '100%'],
                        center: ['50%', '50%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        itemStyle: {
                            barBorderRadius: 10
                        },
                        data: [{
                            value: total - value,
                            name: ''
                        },
                        {
                            value: value,
                            name: '',

                        },
                        ]
                    }]
                };
                myChart.setOption(option, true);
            },
            selectOption(actions, index) {
                var $btn = jQuery(actions.$el).find('.actions-button').eq(index)
                $btn.siblings().find('.actions-button-text').css({ color: '' })
                $btn.css({ color: '#F8B80E' })
            },
            initBind() {
                var self = this
                jQuery('#swWbProgressCountType .list-button--normal').off().click(function (e) {
                    var $current = jQuery(e.currentTarget)
                    $current.siblings().removeClass('is-active')
                    $current.addClass('is-active');
                    jQuery('#swWbProgressCountTypeText').text($current.text())
                    self.taskType = e.currentTarget.getAttribute('data-type')
                    self.getData()
                })

                var ac1 = app.actions.create({
                    buttons: [
                        {
                            text: '按该月所有进行中的任务计算',
                            onClick: function (actions, e) {
                                jQuery('#swWbProgressCountTypeText').text('按该月所有进行中的任务计算')
                                self.taskType = '0'
                                self.getData()
                            }
                        },
                        {
                            text: '按该月到期任务计算', onClick: function (actions, e) {
                                jQuery('#swWbProgressCountTypeText').text('按该月到期任务计算')
                                self.taskType = '1'
                                self.getData()
                            }
                        }
                    ],
                    on: {
                        close: function () {
                            jQuery('#swWbSelect').removeClass('is-open')
                        }
                    }
                })

                jQuery('#swWbSelect').click(function (e) {
                    jQuery(e.currentTarget).addClass('is-open')
                    ac1.open();
                    jQuery(ac1.$el).addClass('actions-modal--radius')
                    self.selectOption(ac1, self.taskType)
                })
            }
        },
        on: {
            pageAfterIn: function (e, page) {
                var self = this;
                self.getData();
                self.initBind()
            }
        }
    }
</script>